<template>
  <div class="control_center">
    <video id="my-video" style="width:80%;" autoplay controls @error.prevent="videoLoadError(liveinfo)" v-show="is_play == true"></video>
    <div v-show="is_play == false">
      <img src="../../../assets/img/live_no.png" alt="">
      当前暂无直播
    </div>
  </div>
</template>
<script>
import $video from "./../../../assets/js/video.js";
export default {
  data () {
    return {
      apiname: "",
      is_play: false,
      flvPlayer: null
    };
  },
  destroyed () {
    if (this.flvPlayer) {
      this.flvPlayer.destroy();
    }
  },
  methods: {
    videoLoadError () {
      console.log(111)
    },
    startPlay () {
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById("my-video");
        this.flvPlayer = flvjs.createPlayer(
          {
            type: "flv",
            isLive: true,
            hasAudio: false,
            //必须与node搭建的流媒体服务器中的http的端口和推流的参数吻合
            url: $video.playUrl(this.$route.query.mid, "flv", this.apiname)
          },
          {
            enableStashBuffer: true,
            stashInitialSize: 128
          }
        );
        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
        this.flvPlayer.play();


        // 【flvjs播放器事件侦听】
        this.flvPlayer.on(flvjs.Events.LOADING_COMPLETE, (res) => {
          this.is_play = false;
          console.log("加载完成")
          this.startPlay();
        })

        this.flvPlayer.on(flvjs.Events.METADATA_ARRIVED, (res) => {
          this.is_play = true;
          console.log("获取元数据")
        })

        this.flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
          this.is_play = false;
          console.log("视频错误信息回调")
          console.log("errorType:", errorType);
          console.log("errorDetail:", errorDetail);
          console.log("errorInfo:", errorInfo);

          this.startPlay();

        })
      } else {
        console.log("flvjs不支持");
      }
    }
  },
  created () {
    this.$api.getSettings.findConfig({ iden: "wxhdwz" }).then(res => {
      if (res.data.code == 200) {
        this.apiname = res.data.result;
        this.startPlay();
      }
    });
  }
};
</script>

<style lang="less" scoped>
.control_center {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-top: 8px solid rgb(214, 218, 225);
  border-bottom: 8px solid rgb(214, 218, 225);
  > video {
    width: 80%;
  }
  div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: rgb(137, 137, 137);
    img {
      width: 80px;
      margin-bottom: 10px;
    }
  }
}
</style>
